<template>
  <h2 style="float: inline-start; margin-left: 20%">
    <d style="color: black"> 智慧农业—智慧畜牧育种管理平台</d>
  </h2>

  <div class="centent">
    <div class="centent1">
      <d>欢迎您登录</d>
    </div>
    <div class="centent2">
      <div class="img">
        <el-form ref="ruleFormRef" style="max-width: 300px; margin-left: 10%" :model="ruleForm" :rules="rules"
          label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
          <el-form-item label="" prop="Account">
            <el-input v-model="ruleForm.Account" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="" prop="Password">
            <el-input v-model="ruleForm.Password" show-password placeholder="密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useCounterStore } from '@/stores/counter';

const appurl=import.meta.env.VITE_APP_API_URL;
const appbedurl=import.meta.env.VITE_APPREAD_API_URL;

const counterStore = useCounterStore();

const dialogVisible = ref(false);
const route = useRoute();
const router = useRouter();

const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  Account: '',
  Password: ''
});


//校验规则
const rules = reactive<FormRules>({
  Account: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    //密码和数字组合，长度在 3 到 6 个字符
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{3,6}$/,
      message: '密码和数字组合，长度在 3 到 6 个字符',
      trigger: 'blur'
    }
  ],
  Password: [
    {
      required: true,
      message: '密码名不能为空',
      trigger: 'change'
    },
    //密码和数字组合，长度在 6 到 12 个字符
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
      message: '密码和数字组合，长度在 3 到 6 个字符',
      trigger: 'blur'
    }
  ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios
        .get(appurl+'/api/RBACs/Login', {
          params: {
            Account: ruleForm.Account,
            Password: ruleForm.Password
          }
        })
        .then((res) => {
          console.log(res.data)
          if (res.data.list.code == 0) {
            ElMessage.success(res.data.list.messege);
            counterStore.loginStatus = true;
            counterStore.employeeId = res.data.list.item.employeeId;
            counterStore.loginTrue = true;
            window.localStorage.setItem("token", res.data.token);
            // 数据提交后端要加入新的Token值
            axios.defaults.headers.common["Authorization"] =
              "Bearer " + res.data.token;
            router.push('/MainView');
          } else {
            ElMessage.error(res.data.list.messege);
          }
        });
    } else {
      console.log('error submit!', fields);
    }
  });
};
</script>

<style>
.centent {
  width: 400px;
  height: 300px;
  margin-left: 50%;
  margin-top: 160px;
  background-color: rgba(71, 72, 74, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.centent1 {
  width: 400px;
  height: 50px;
  text-align: center;
  line-height: 45px;
  color: #ffffff;
  font-family: '楷体';
  font-size: 30px;
  background-color: rgba(71, 72, 74, 0.7);
}

.centent2 {
  width: 400px;
  height: 140px;
  margin-top: 30px;
}

.centent2 img {
  width: 40px;
  height: 35px;
  float: left;
  opacity: 0.7;
  margin-top: 25px;
  margin-left: 50px;
}

.input1 {
  margin-top: 5px;
  text-align: center;
}

.input1 input {
  font-size: 20px;
  background-color: rgba(122, 125, 127, 0.5);
}

.bottom {
  width: 400px;
  margin-top: 20px;
  height: 114px;
}

.bottom img {
  width: 400px;
  height: 120px;
  opacity: 0.4;
}
</style>
